{% extends "oa/base.html" %}
{% block header_nav %}{% endblock %}
{% block this_css %} {% endblock %}
{% block content %}
    <section class="wrapper" style="padding-top: 20px ">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                    <form class="form-inline" method="get" action="{{ request.path }}">
                        <div class="form-group">
                            <label for="channel_id">销售部门：</label>
                            <select name="channel_id" id="id_channel_id" class="form-control">
                                <option value="">全部</option>
                                {% for channel in channels %}
                                    {% if channel.pk|escape == request.GET.channel_id|escape %}
                                        <option value="{{ channel.pk }}" selected>{{ channel.name }}</option>
                                    {% else %}
                                        <option value="{{ channel.pk }}">{{ channel.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="date_start">开始日期：</label>
                            <input type="date" class="form-control" id="date_start" name="date_start"
                                   value="{{ request.GET.date_start }}">
                        </div>
                        <div class="form-group">
                            <label for="date_end">截止日期：</label>
                            <input type="date" class="form-control" id="date_end" name="date_end"
                                   value="{{ request.GET.date_end }}">
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div id="sales_chart"></div>
        </div>
        <div class="col-lg-4">
            <div class="panel  panel-default">
                <div class="panel-heading">
                    根据渠道统计销售额
                </div>
                <div class="panel-body">
                    <ul>
                        {% for year, y_data in sales_data.items %}
                            <li> {{ year }}
                                <ul>
                                    {% for month, m_data in y_data.items %}
                                        <li> {{ month }}
                                            <ul>{% for level, sales in m_data.items %}
                                                <li>
                                                    <span style="display:-moz-inline-box;display:inline-block;width:100px;">{{ level }}: </span>
                                                    <span style="display:-moz-inline-box;display:inline-block;width:100px;text-align:right;">{{ sales|floatformat:'2' }}</span>
                                                </li>{% endfor %}
                                            </ul>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </section>
{% endblock %}


{% block this_js %}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script language="JavaScript">
        Highcharts.chart('sales_chart', {
            credits: {enabled: false},
            chart: {type: 'bar', height: '750px'},
            title: {text: '销售统计'},
            xAxis: {
                categories: {{ year_gbs|safe }},
            },
            yAxis: {
                min: 0,
                title: {text: '销售统计'}
            },
            legend: {
                reversed: true,
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    dataLabels: {enabled: true}
                }
            },
            series: {{ series_data|safe }}
        });
    </script>
{% endblock %}

